<template>
	<view style="padding: 20rpx;">
		<u-navbar :title="inits.title"></u-navbar>
		<view class="flex flex-wrap-w flex-jc-sb pt-25">
			<view class="font-30 list" @click="jump(`/pages/hotel/albumTabs?id=${inits.id}&title=${inits.title}&type=${item.album_cate}&current=${i}`)"
				v-for="(item,i) in inits.list" :key="item.album_cate">
				<u-image mode="aspectFill" height="100%" :src="item.album_images_arr[0]" v-if="item.album_images_arr.length"></u-image>
				<view class="flex flex-jc-c flex-ai-c flex-dir-c list-name">
					<view>{{item.album_cate_text}}</view>
					<view>{{item.album_images_arr.length || 0}}张</view>
				</view>
			</view>
		</view>

		<view class="btn" @click="look">
			<view class="btn-text">查看房型</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import hotel from '../../api/hotel.js';
	const inits = reactive({
		list: [],
		title: '',
		id: null
	})
	const jump = (url : string) => {
		uni.navigateTo({
			url: url
		})
	}
	const look = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const getHotelPhotos = async () => {
		const res = await hotel.getHotelPhotos({
			hotel_id: inits.id,
			photo_type: -1
		})
		inits.list = res.data
	}
	onLoad((op : any) => {
		inits.title = op.title
		inits.id = op.id
		getHotelPhotos()
	})
</script>

<style lang="scss" scoped>
	.list {
		width: 338rpx;
		height: 318rpx;
		margin-bottom: 24rpx;
		position: relative;
		image{
			border-radius: 19rpx;
		}
		.list-name {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			color: #fff;
		}
	}

	.btn {
		height: 192rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -7rpx 6rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 9rpx 9rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;

		.btn-text {
			margin: 38rpx 38rpx 0 38rpx;
			height: 77rpx;
			background: #009943;
			border-radius: 9rpx;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			line-height: 77rpx;
		}
	}
</style>